<template>
  <div class="nav" :class="{ 'no-bg': hideBackground }">
    <div class="hot" v-if="title">
      {{ title }}
    </div>
    <div class="tab" v-if="keywords?.length">
      <span class="link" v-for="(keyword, index) in keywords" :key="index">
        {{ keyword }}
        <span class="line" v-if="index < keywords.length - 1">|</span>
      </span>
    </div>
    <div class="more" v-if="moreLink">
      <a :href="moreLink" class="s-fc3">{{ moreText || '' }}</a>
      <i v-if="showIcon" class="cor s-bg s-bg-6">&nbsp;</i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

withDefaults(defineProps<{
  title?: string,
  keywords?: string[],
  moreLink?: string,
  moreText?: string,
  showIcon?: boolean,
  hideBackground?: boolean
}>(), {
  showIcon: true // ✅ 设置默认显示图标
})
</script>

<style lang="scss" scoped>
.nav {
  height: 33px;
  padding: 0 10px 0 34px;
  background-position: -225px -156px !important;
  border-bottom: 2px solid #C10D0C;
  background: url(../assets/Home/Recommend/index.png) no-repeat;
  display: flex;

  &.no-bg {
    background: none !important; // ✅ 取消背景图
  }

  .hot {
    font-size: 20px;
    font-weight: normal;
    line-height: 28px;
    cursor: pointer;
  }

  .tab {
    margin: 7px 0 0 20px;

    .link {
      color: #666;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .line {
      margin: 0 10px;
      color: #ccc;
    }
  }

  .more {
    color: #666;
    margin-left: auto;
    margin-top: 9px;

    a {
      &:hover {
        text-decoration: underline;
      }
    }

    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-left: 4px;
      vertical-align: middle;
      background-position: 0 -240px !important;
      background: url(../assets/Home/Recommend/index.png) no-repeat;
    }
  }
}
</style>
